<template>
  <view style="padding-bottom: 150rpx;">
    <view style="color: #999;padding: 30rpx;"><text style="color: red;">*</text>为了您的资金安全，请提交以下信息进行身份核实</view>
    <view class="wrap">
      <u-form :model="form" ref="uForm" :rules="rules">
        <u-form-item label-width="150" label="姓名" prop="realName">
          <u-input placeholder="请输入姓名" v-model="form.realName" type="text"></u-input>
        </u-form-item>

        <u-form-item label-width="150" label="身份证号" prop="idCard">
          <u-input placeholder="请输入身份证号" v-model="form.idCard" type="text" maxlength="18"></u-input>
        </u-form-item>

        <u-form-item label-width="150" label="手机号" prop="mobile">
          <u-input placeholder="请输入手机号" v-model="form.mobile" type="number" maxlength="11"></u-input>
        </u-form-item>
      </u-form>
      <view style="padding: 30rpx;">
        <text style="color: red;">*</text>
        运营商实名认证是通过比对姓名、身份证号、手机号的一致性，核验手机用户身份信息的真伪。请使用13、15、18开头的运营商手机号段。
      </view>

      <view style="padding: 30rpx;color: cornflowerblue;text-decoration: underline;"
        @click="$u.route('/pages/auth/authentication2')">
        人工审核验证
      </view>
    </view>

    <u-button type="success" class="custom-style" @click="submit" shape="circle">{{btnText}}</u-button>

    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import * as API_Haibao from '@/api/haibao.js';
  export default {
    data() {
      return {
        btnText: '下一步',
        form: {
          realName: '',
          idCard: '',
          mobile: '',
        },
        rules: {
          realName: [{
              required: true,
              message: '请输入姓名',
              trigger: 'blur',
            },
            {
              min: 1,
              max: 8,
              message: '姓名长度在1到8个字符',
              trigger: ['change', 'blur'],
            },
          ],
          idCard: [{
              required: true,
              message: '请输入身份证号',
              trigger: ['change', 'blur'],
            },
            {
              validator: (rule, value, callback) => {
                // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
                return this.$u.test.idCard(value);
              },
              message: '身份证号不正确',
              // 触发器可以同时用blur和change，二者之间用英文逗号隔开
              trigger: ['change', 'blur'],
            }
          ],
          mobile: [{
              required: true,
              message: '请输入手机号',
              trigger: ['change', 'blur'],
          	 },
            {
              validator: (rule, value, callback) => {
                // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
             			return this.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              // 触发器可以同时用blur和change，二者之间用英文逗号隔开
              trigger: ['change', 'blur'],
            }
          ],
        },
      }
    },
    onLoad() {

    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    methods: {
      submit() {
        this.$refs.uForm.validate(async valid => {
          if (valid) {
            console.log(this.form)
            uni.showLoading({
              title: '认证中...'
            })
            setTimeout(() => {
              uni.hideLoading()
            }, 1000)
            let res = await API_Haibao.getMemberIdentity(this.form)
            console.log(res)
            if (res) {
              this.$qqyUtils.uToast.call(this, '认证成功！', 'success')
              setTimeout(() => {
                this.$u.route({
                  type: 'tab',
                  url: `/pages/tabs/mine/mine`
                })
              }, 1200)
            } else {
              this.$qqyUtils.uToast.call(this, '认证失败！请人工审核认证', 'error')
            }
          } else {
            console.log('验证失败');
          }
        });
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F8F8F8;
  }

  .wrap {
    padding: 30rpx;
    background-color: #FFFFFF;
  }

  .custom-style {
    width: 90% !important;
    position: fixed !important;
    bottom: 50rpx !important;
    left: 5% !important;
  }
</style>
